<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ppt预览</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			body {
				background-color: #F2F5F9;
			}

			#main {
				width: 1200px;
				margin: 0 auto;
			}

			.detail {
				position: relative;
				z-index: 9;
				float: left;
				width: 870px;
			}

			.side {
				position: relative;
				z-index: 9;
				float: right;
				width: 320px;
			}

			/* .info {
				height: ;
				background: #fff;
				
			} */
			.read-topbar {
				position: relative;
				width: 870px;
				height: 38px;
				background: #fcfcfc;
				border-bottom: 1px solid #f5f5f5;
				z-index: 2022;
			}

			.detail .info {
				min-height: 80px;
				border-radius: 6px;
				margin-bottom: 10px;
				background-color: #fff;
			}

			.read-topbar.fixed {
				position: fixed;
				top: 0;
			}

			.reader-thumb {
				position: absolute;
				z-index: 1000;
				top: 38px;
				left: 0;
				width: 120px;
				height: 800px;
				overflow-x: hidden;
				overflow-y: auto;
				background: #fff;
			}

			.reader-thumb::-webkit-scrollbar {
				width: 3px;
				height: 0;
			}

			.reader-thumb::-webkit-scrollbar-thumb {
				border-radius: 10px;
				background-color: #ededed;
			}

			.reader-thumb li {
				position: relative;
				width: 100%;
				height: 65px;
				padding: 5px 0;
				text-align: center;
				overflow: hidden;
				box-sizing: border-box;
				cursor: pointer;
			}

			.reader-thumb li span {
				position: absolute;
				right: 8px;
				bottom: 5px;
				min-width: 15px;
				line-height: 15px;
				background: #000;
				border-radius: 2px 0 4px 0;
				font-size: 12px;
				color: #fff;
				opacity: 0.6;
			}

			.reader-thumb li.active {
				background-color: #2878ff;
			}

			.reader-thumb li img {
				border-radius: 4px;
				width: 100px;
				height: 55px;
				display: inline-block;
				box-sizing: border-box;
				border: 1px solid #eee;
			}

			.read-bd {
				padding-left: 120px;
			}

			.read-bd ul li {
				position: relative;
				font-size: 0;
				border-bottom: 10px solid #f5f5f5;
			}

			.read-bd ul li span {
				position: absolute;
				right: 0;
				bottom: 0;
				min-width: 15px;
				line-height: 15px;
				background: #000;
				font-size: 12px;
				color: #fff;
				opacity: 0.6;
				text-align: center;
			}

			.goto-page {
				padding: 10px;
				text-align: right;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div class="detail">
				<div class="info">各种文档信息</div>
				<div class="read-topbar">
					<div class="topbar-container">
						<div class="goto-page"></div>
					</div>
					<ul class="reader-thumb">
						<li><img src="https://via.placeholder.com/100x55.png/2878ff" alt="1"><span>1</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/ff0000" alt="1"><span>2</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/FFF0F5" alt="1"><span>3</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/8A2BE2" alt="1"><span>4</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/00BFFF" alt="1"><span>5</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/2878ff" alt="1"><span>6</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/ff0000" alt="1"><span>7</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/FFF0F5" alt="1"><span>8</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/8A2BE2" alt="1"><span>9</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/00BFFF" alt="1"><span>10</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/2878ff" alt="1"><span>11</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/ff0000" alt="1"><span>12</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/FFF0F5" alt="1"><span>13</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/8A2BE2" alt="1"><span>14</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/ADD8E6" alt="1"><span>15</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/00FFFF" alt="1"><span>16</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/00FFFF" alt="1"><span>17</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/00FFFF" alt="1"><span>18</span></li>
						<li><img src="https://via.placeholder.com/100x55.png/00FFFF" alt="1"><span>19</span></li>
					</ul>
				</div>
				<div class="read-bd">
					<ul>
						<li id="page1">
							<img src="https://via.placeholder.com/750x500.png/2878ff" alt="">
							<span>1</span>
						</li>
						<li id="page2">
							<img src="https://via.placeholder.com/750x600.png/ff0000" alt="">
							<span>2</span>
						</li>
						<li id="page3">
							<img src="https://via.placeholder.com/750x400.png/FFF0F5" alt="">
							<span>3</span>
						</li>
						<li id="page4">
							<img src="https://via.placeholder.com/750x300.png/8A2BE2" alt="">
							<span>4</span>
						</li>
						<li id="page5">
							<img src="https://via.placeholder.com/750x500.png/00BFFF" alt="">
							<span>5</span>
						</li>
						<li id="page6">
							<img src="https://via.placeholder.com/750x500.png/2878ff" alt="">
							<span>6</span>
						</li>
						<li id="page7">
							<img src="https://via.placeholder.com/750x500.png/ff0000" alt="">
							<span>7</span>
						</li>
						<li id="page8">
							<img src="https://via.placeholder.com/750x500.png/FFF0F5" alt="">
							<span>8</span>
						</li>
						<li id="page9">
							<img src="https://via.placeholder.com/750x500.png/8A2BE2" alt="">
							<span>9</span>
						</li>
						<li id="page10">
							<img src="https://via.placeholder.com/750x500.png/00BFFF" alt="">
							<span>10</span>
						</li>
						<li id="page11">
							<img src="https://via.placeholder.com/750x500.png/2878ff" alt="">
							<span>11</span>
						</li>
						<li id="page12">
							<img src="https://via.placeholder.com/750x500.png/ff0000" alt="">
							<span>12</span>
						</li>
						<li id="page13">
							<img src="https://via.placeholder.com/750x500.png/FFF0F5" alt="">
							<span>13</span>
						</li>
						<li id="page14">
							<img src="https://via.placeholder.com/750x500.png/8A2BE2" alt="">
							<span>14</span>
						</li>
						<li id="page15">
							<img src="https://via.placeholder.com/750x500.png/ADD8E6" alt="">
							<span>15</span>
						</li>
						<li id="page16">
							<img src="https://via.placeholder.com/750x500.png/00FFFF" alt="">
							<span>16</span>
						</li>
					</ul>
					<div style="width: 100px;height: 600px;"></div>
				</div>
			</div>
			<div class="side">2</div>
		</div>
		<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<script>
			$(function() {
				let page = 1, // 默认的页码
					differ = 5, // 当前页显示还剩余5页就开始加载下一波数据，每次请求的数据多少后面配置
					total = 19, // 总数据条数
					casheScrollTop = null, // 记录上次的滚动条的位置
					$headerHeight = $('.info').outerHeight(); // 滚动到该高度固定
				// 初始化
				function init() {
					var $windowHeight = $(window).height();
					var $height = $windowHeight - $('.read-topbar').outerHeight();
					$('.reader-thumb').height($height - 10);
				}
				init();
				// 滚动监听
				$(window).on('scroll', function(e) {
					var scrollTop = $(this).scrollTop();
					getCurrentPage(scrollTop);
					setFixed(scrollTop);
				})
				// 根据滚动的高度设置是否固定定位
				function setFixed(scrollTop) {
					if (scrollTop >= $headerHeight) {
						$('.read-topbar').addClass('fixed');
					} else {
						$('.read-topbar').removeClass('fixed');
					}
				}
				// 初始化滚动条高度
				$('html,body,document').animate({ scrollTop: 0 }, 1);
				// 初始化
				jumpPage(page, 0);
				// 根据当前页码进行跳转
				function jumpPage(page, type = 1) {
					let $thumbLi = $('.reader-thumb li'),
						$currentLi = $thumbLi.eq(page - 1);
					$thumbLi.removeClass('active');
					$currentLi.addClass('active');
					if (($('.read-bd ul li').length - page) <= differ && $('.read-bd ul li').length < total) {
						getData();
					}
					$('.goto-page').html('<span>' + page + '</span><span>/</span><span>' + $thumbLi.length + '</span>');
					if (type) $('html,body').animate({ scrollTop: ($('#page' + page).offset().top) }, 0);
					const initHeight = 260;
					const scrollTop = $('.reader-thumb').scrollTop();
					const offsetTop = $currentLi[0].offsetTop;
					const py = offsetTop - initHeight;
					$('.reader-thumb').animate({ scrollTop: py }, 0);
				}
				// 左边点击事件
				$('.reader-thumb li').on('click', function(e) {
					page = $(this).find('span').text();
					jumpPage(page);
				})
				// 获取当前页
				function getCurrentPage(scrollTop) {
					let $viewSum = 0, // 初始值
						$direction = 'top', //top-向上 down-向下
						$viewli = $('.read-bd ul li');
					if (scrollTop <= $headerHeight) {
						page = 1;
						jumpPage(page, 0);
						return;
					}
					$direction = casheScrollTop > scrollTop && scrollTop > 0 ? 'down' : 'top';
					casheScrollTop = scrollTop;
					for (let i = 0; i < $viewli.length; i++) {
						$viewSum = $viewSum + $($viewli[i]).height();
						const flag = $direction == 'top' ? (scrollTop >= $viewSum && $viewli[i + 1] && page != (i + 2) && page < (i + 2)) : (scrollTop + ($($viewli[i + 1]).height() - 10) <= $viewSum && page != (i + 1) && page > (i + 1));
						if (flag) {
							page = $direction == 'top' ? i + 2 : i + 1;
							jumpPage(page,0);
							break;
						}
					}
				}
				// 加载更多数据
				function getData() {
					var c = '';
					for (var i = 17; i <= 19; i++) {
						c += '<li id="page' + i + '">' + '<img src="https://via.placeholder.com/750x500.png/00FFFF" alt="">' + '<span>' + i + '</span>' + '</li>';
					}
					$('.read-bd ul').append(c);
				}
			})
		</script>
	</body>
</html>
